<template>
  <el-card class="card-main">
    <div class="table-header">
      <div class="left">型号明细</div>
      <el-button class="btn-style">选择有效报价</el-button>
    </div>

    <Table
      :minHeight="180"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :tableCellWidth="tableCellWidth"
      :tableCellAlign="tableCellAlign"
      :tableShowTooltip="tableShowTooltip"
      :tableEdit="tableEdit"
      :tableShowPagination="tableShowPagination"
      :paginationObj="paginationObj"
      :tableIsShowSerial="false"
      :tableIsShowCheckbox="true"
    >
    </Table>

    <div class="total-amount">采购金额: 0.00</div>
  </el-card>
</template>

<script>
import Table from "@/components/ability-components/table.vue";
export default {
  name: "OrderContent",
  components: {
    Table,
  },
  data() {
    return {
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: false,
        align: "center",
      },
      tableShowTooltip: [],
      tableCellAlign: [
        {
          prop: "brand",
          align: "center",
        },
        {
          prop: "model",
          align: "center",
        },
        {
          prop: "count",
          align: "center",
        },
        {
          prop: "MPQ",
          align: "center",
        },
        {
          prop: "batch",
          align: "center",
        },
        {
          prop: "encapsulation",
          align: "center",
        },
        {
          prop: "price",
          align: "center",
        },
        {
          prop: "deliveryDate",
          align: "center",
        },
        {
          prop: "packing",
          align: "center",
        },
        {
          prop: "remark",
          align: "center",
        },
        {
          prop: "currency",
          align: "center",
        },
        {
          prop: "unitPrice",
          align: "center",
        },
        {
          prop: "amount",
          align: "center",
        },
      ],
      tableCellWidth: [],
      tableColumn: [
        {
          prop: "status",
          label: "状态",
        },
        {
          prop: "brand",
          label: "品牌",
        },
        {
          prop: "model",
          label: "型号",
        },
        {
          prop: "count",
          label: "数量",
        },
        {
          prop: "MPQ",
          label: "MPQ",
        },
        {
          prop: "batch",
          label: "批次",
        },
        {
          prop: "encapsulation",
          label: "封装",
        },
        {
          prop: "currency",
          label: "币种",
        },
        {
          prop: "unitPrice",
          label: "单价",
        },
        {
          prop: "amount",
          label: "采购金额",
        },
        {
          prop: "price",
          label: "接受价",
        },
        {
          prop: "deliveryDate",
          label: "交货期",
        },
        {
          prop: "packing",
          label: "包装",
        },
        {
          prop: "remark",
          label: "备注",
        },
      ],
      tableData: [
        {
          Key: "1",
          ID: "1",
          status: "已生成报价单",
          brand: "KEMET", //品牌
          model: "H1", //型号
          count: "1000", //数量
          MPQ: "MPQ", //MPQ
          batch: "1", //批次
          encapsulation: "封装", //封装
          price: "10.000000", //接受价
          deliveryDate: "2022-11-11", //交货期
          packing: "包装", //包装
          remark: "备注", //备注
          currency: "人民币", //币种
          unitPrice: "10.00", //单价
          amount: "10", //采购金额
        },
        {
          Key: "2",
          ID: "2",
          status: "已生成报价单",
          brand: "KEMET", //品牌
          model: "H1", //型号
          count: "1000", //数量
          MPQ: "MPQ", //MPQ
          batch: "1", //批次
          encapsulation: "封装", //封装
          price: "10.000000", //接受价
          deliveryDate: "2022-11-11", //交货期
          packing: "包装", //包装
          remark: "备注", //备注
          currency: "人民币", //币种
          unitPrice: "10.00", //单价
          amount: "10", //采购金额
        },
      ],
    };
  },
  methods: {},
  created() {},
};
</script>
<style lang="scss" scoped>
.card-main {
  margin: 10px 0;
}
.table-header {
  height: 30px;
  border-bottom: 1px solid rgba(228, 228, 228, 1);
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .left {
    padding: 0 30px;
    border-bottom: 2px solid rgb(68, 42, 141);
  }
}

.btn-style {
  margin-top: -10px;
  background-color: rgb(68, 42, 141);
  color: #ffffff;
}

.total-amount {
  margin: 10px 0;
  background-color: rgba(242, 242, 242, 1);
  height: 66px;
  line-height: 66px;
  padding-left: 20px;

  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
}
</style>
